<template>
  <div class="product-manager-warp disabled-warp" style="height: calc(100vh - 104px); padding: 20px; ">
    <div class="dashboard-container"
         style=" padding: 20px 25px 10px;  ">
      <div style="line-height: 16px; flex-wrap: wrap;   align-items: center;  font-size: 16px; font-family: Source Han Sans CN;font-weight: bold;color: #2F3745; ">
        <div class="dashboard-inner">
          商品管理
          <el-tooltip class="item" effect="dark" content="温馨提示：对应列可以通过拖动改变表格宽度" placement="top">
            <i style="position: relative; left: 6px; top: 2px;" class="header-icon el-icon-info"></i>
          </el-tooltip>
        </div>
      </div>
    </div>

    <div style="display: flex; height: calc(100% - 30px);">
      <div class="left-content" style="color: #2F3745; ">
        <tree-expansion @statusChange="statusChange" />
      </div>

      <div class="right-content" style="background: #fff; " :style="`${expansionStatus? 'width: calc(100% - 260px);' : 'width: 100%;'};
            ${expansionStatus ? 'margin-left: 10px;' : 'margin-left: 0;'} `">
        <div :style="`margin-left: 12px; margin-right: 12px; height: 100%; width: calc(100% - 24px);`">
          <common-operation-form :list="list"/>
          <el-table style="margin-top: 15px; " fit :height="windowHeight - 10"
                    @select="changeevent" ref="tableRef"
                    v-loading="table.loading" :data="table.data" border >
            <template v-for="(item, index) in table.header1">
              <el-table-column :prop="item.prop" :key="index"
                               :width="item.width || 'auto'" :align="`center`"
                               :label="item.label">
                <template slot-scope="scope">
                  <span style=" ">{{ scope.row[item.prop] }}</span>
                </template>
              </el-table-column>
            </template>

            <el-table-column :align="`center`" :key="101" type="selection" :label="'禁用'" width="45"></el-table-column>

            <template v-for="(item, index) in table.header2">
              <el-table-column :prop="item.prop" :key="index + 1000"
                               :width="item.width || 'auto'" :align="`center`"
                               :label="item.label">
                <template slot-scope="scope">
                  <span style=" ">{{ scope.row[item.prop] }}</span>
                </template>
              </el-table-column>
            </template>

            <el-table-column
                label="操作" width="120" fixed="right">
              <template slot-scope="scope">
                <div style="display: flex;">
                  <el-tooltip content="编辑" slot="reference" placement="top">
                    <el-button size="mini" type="primary" icon="el-icon-edit" circle
                               @click="edit(scope.row)"></el-button>
                  </el-tooltip>
                  <el-tooltip content="删除" slot="reference" placement="top">
                    <el-button size="mini" @click="del(scope.row)" type="danger" icon="el-icon-delete"
                               circle></el-button>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination style="position: relative; text-align: right; margin-top: 10px;"
                         layout="sizes, jumper, prev, pager, next"
                         :total="1000">
          </el-pagination>
        </div>
      </div>
    </div>

    <el-dialog style="margin-top: 10px;"
               :close-on-click-modal="false"
               width="75%" v-dialog-drag
               title="编辑商品" :modal="false"
               custom-class="dialoginter3"
               :visible.sync="editDialog">
      <div>
        <common-dialog-form v-if="editDialog" ref="commondialogformref" :col="dialog.col" :list="dialog.form"/>
      </div>


      <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="editDialog = false">关闭</el-button>
          <el-button type="primary" size="small" @click="submit">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import CommonOperationForm from "@/components/CommonOperationForm/index.vue";
import CommonDialogForm from "@/components/CommonDialogForm/index.vue";
import TreeExpansion from "@/components/TreeExpansion/ProductManager.vue";

export default {
  components: {CommonOperationForm, CommonDialogForm, TreeExpansion},
  data() {
    return {
      list: [
        {
          type: 'input',
          text: '供应商姓名：',
          width: '95px',
          value: '',
        },
        {
          type: 'button',
          buttonIcon: 'el-icon-folder-add',
          buttonText: '增加',
          event: () => {
            this.editDialog = true;
          }
        },
        {
          type: 'button',
          buttonIcon: 'el-icon-document-add',
          buttonText: '导入',
          event: () => {

          }
        },
        {
          type: 'button',
          buttonIcon: 'el-icon-takeaway-box',
          buttonText: '导出',
          event: () => {

          }
        },
      ],
      expansionStatus: true,
      editDialog: false,
      table: {
        data: [],
        loading: false,
        header2: [
          {
            "prop": "unit",
            "label": "单位"
          },
          {
            "prop": "specification",
            "label": "规格型号"
          },
          {
            "prop": "shelfLocation",
            "label": "所在货架"
          },
          {
            "prop": "minStock",
            "label": "最低库存"
          },
          {
            "prop": "currentStock",
            "label": "当前库存"
          },
          {
            "prop": "presetPurchasePrice",
            "label": "预设进价"
          },
          {
            "prop": "presetSellingPrice",
            "label": "预设售价"
          },
          {
            "prop": "sellingCostPrice",
            "label": "销售成本价",
            "width": "90px",
          },
          {
            "prop": "commission",
            "label": "提成"
          },
          {
            "prop": "nameAbbreviation",
            "label": "名称简码"
          },
          {
            "prop": "manufacturer",
            "label": "生产厂商"
          },
          {
            "prop": "remarks",
            "label": "备注"
          }
        ],
        header1: [
          {
            "prop": "productBarcode",
            "label": "商品条码"
          },
          {
            "prop": "productName",
            "label": "商品名称"
          },
          {
            "prop": "productCategory",
            "label": "商品类别"
          },
        ],
      },
      dialog: {
        col: 3,
        form: [
          [
            {
              text: '所属类别：',
              required: true,
              field: 'productCategory',
              requiredMessage: "请选择类别",
              type: 'selectTree',
              node: null,
              value: null,
            },
            {
              text: '商品条码：',
              value: '',
              field: 'productBarcode',
              type: 'input'
            },
            {
              text: '预设售价：',
              type: 'input',
              field: 'presetSellingPrice',
              value: '',
              placeholder: "¥¥"
            },
          ],
          [
            {
              text: '商品名称：',
              type: 'input',
              field: 'productName',
              requiredMessage: "请输入商品名称",
              required: true,
              value: '',
            },
            {
              text: '规格型号：',
              value: '',
              field: 'specification',
              type: 'input',
            },
            {}
          ],
          [
            {
              text: '产品单位：',
              type: 'selectAllowCreate',
              requiredMessage: "请输入或选择产品单位",
              required: true,
              field: 'unit',
              value: '',
              options: [
                {
                  value: '10001',
                  label: '瓶',
                },
                {
                  value: '10002',
                  label: '箱',
                },
                {
                  value: '10003',
                  label: '盒',
                },
              ]
            },
            {
              text: '所在货位：',
              type: 'selectAllowCreate',
              value: '',
              field: 'shelfLocation',
              options: [
                {
                  value: '10001',
                  label: '默认货位',
                },
              ]
            },
            {
              text: '预设进价：',
              type: 'input',
              value: '',
              field: 'presetPurchasePrice',
              placeholder: "¥¥"
            },
          ],
          [
            {
              text: '商品图片：',
              type: 'uploadPic',
              value: '',
              uploadWidth: "1000px",
            },
          ],
          [
            {
              text: '生产厂商：',
              type: 'textarea',
              value: '',
              field: 'manufacturer',
              rowWidth: '100%',
            },
          ],
          [
            {
              text: '填写备注：',
              value: '',
              rowWidth: '100%',
              field: 'remarks',
              type: 'textarea',
            },
          ],
        ],
        copyForm: [
          [
            {
              text: '所属类别：',
              required: true,
              field: 'productCategory',
              requiredMessage: "请选择类别",
              type: 'selectTree',
              node: null,
              value: null,
            },
            {
              text: '商品条码：',
              value: '',
              field: 'productBarcode',
              type: 'input'
            },
            {
              text: '预设售价：',
              type: 'input',
              field: 'presetSellingPrice',
              value: '',
              placeholder: "¥¥"
            },
          ],
          [
            {
              text: '商品名称：',
              type: 'input',
              field: 'productName',
              requiredMessage: "请输入商品名称",
              required: true,
              value: '',
            },
            {
              text: '规格型号：',
              value: '',
              field: 'specification',
              type: 'input',
            },
            {}
          ],
          [
            {
              text: '产品单位：',
              type: 'selectAllowCreate',
              requiredMessage: "请输入或选择产品单位",
              required: true,
              field: 'unit',
              value: '',
              options: [
                {
                  value: '10001',
                  label: '瓶',
                },
                {
                  value: '10002',
                  label: '箱',
                },
                {
                  value: '10003',
                  label: '盒',
                },
              ]
            },
            {
              text: '所在货位：',
              type: 'selectAllowCreate',
              value: '',
              field: 'shelfLocation',
              options: [
                {
                  value: '10001',
                  label: '默认货位',
                },
              ]
            },
            {
              text: '预设进价：',
              type: 'input',
              value: '',
              field: 'presetPurchasePrice',
              placeholder: "¥¥"
            },
          ],
          [
            {
              text: '商品图片：',
              type: 'uploadPic',
              value: '',
              uploadWidth: "1000px",
            },
          ],
          [
            {
              text: '生产厂商：',
              type: 'textarea',
              value: '',
              field: 'manufacturer',
              rowWidth: '100%',
            },
          ],
          [
            {
              text: '填写备注：',
              value: '',
              rowWidth: '100%',
              field: 'remarks',
              type: 'textarea',
            },
          ],
        ],
      },
    }
  },
  mounted() {

  },
  methods: {
    statusChange(v) {
      console.log(v);
      this.expansionStatus = v;
      this.$refs.tableRef.doLayout();
    },
    edit(item) {
      let setData = () => {
        for (const inputSet of this.dialog.form) {
          for (const inputItem of inputSet) {
            inputItem['value'] = item[inputItem['field']];
          }
        }
      }

      setData();
      this.editDialog = true;
    },
    del(item) {
      this.$confirm('您确认要删除该供应商吗?', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).then(() => {

      }).catch(() => {

      });
    },
    changeevent(selection, row) {
      console.log(selection, row);

    },
    submit() {
      let data = this.$refs.commondialogformref.requiredEmpty();
      if (data) {
        this.$message.error(data.requiredMessage);
        return;
      }

      data = this.$refs.commondialogformref.getData();
      data['isDisabled'] = false;
      this.dialog.form = JSON.parse(JSON.stringify(this.dialog.copyForm));
      this.table.data.push(data);
      this.editDialog = false;
      this.$message.success("添加成功");
    }
  }
}
</script>


<style lang="scss">
.dashboard {
  &-container {
    background: #fff;
    box-shadow: 0px 0px 10px 0px rgba(45, 51, 65, 0.08);
    border-radius: 10px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.dashboard-inner {
  font-size: 16px;
  font-weight: 700;
  padding: 0 0 10px 0;
  color: #2f3745;
}



.el-scrollbar__view {
  height: 100%;
}

.el-scrollbar__wrap {
  overflow: scroll;
}

.box-card .el-card__body {
  height: 100%;
}

.left-content {
  line-height: 16px;
  flex-wrap: wrap;
  border-radius: 10px;
  display: flex;
  padding-top: 10px;
  align-items: center;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
}


.right-content {
  line-height: 16px;
  flex-wrap: wrap;
  width: calc(100% - 260px);
  border-radius: 10px;
  display: flex;
  padding-top: 10px;
  margin-top: 10px;
  margin-left: 10px;
  align-items: center;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
}
</style>
